<template>
  <child ref='childRef'/>  
</template>

<script lang="ts" setup>
  import {ref , nextTick} from 'vue';
  // 引入子组件
  import child from './children-component.vue'

  const childRef = ref<InstanceType<typeof child>>()

  //nextTick
  nextTick(()=> {
    // 获取子组件的name值
    console.log(childRef.value?.name); // 父组件拿到子组件的数据
    // 执行子组件方法
    childRef.value?.changeName() // 父组件调用子组件的方法 改变子组件的内容
  })

</script>
<style scoped>
.my-box{
    display: flex;
}
  /* 支持CSS变量注入v-bind(color) */
</style>
